<template>
    <div class="repairTask">
        <ul class="tab">
            <li 
            class="tabTitle"
            v-for="(item,index) in tabTitles" 
            :key='index'
            @click="tab(index)"><text class="text" :class="[index == num ? 'active' : '']">{{item}}</text></li>
        </ul>
        <list class="list">
            <cell class="cell" v-for="(item, index) in tabList" :key="index" v-show=" index == num">
                <div class="panel" @click="goDetail(item.WXQH_ID)">
                    <div class="left">
                        <p class="cont">
                            <text class="line"></text><text class="key">维修编号:</text><text class="value">{{item.WXQH_ID}}</text>
                        </p>
                        <p class="cont">
                            <text class="key">户主姓名:</text><text class="value">{{item.HZXM}}</text>
                        </p>
                        <p class="cont">
                            <text class="key">详细地址:</text><text class="value">{{item.XXDZ}}</text>
                        </p>
                        <p class="cont">
                            <text class="key">报修时间:</text><text class="value">{{item.GZSBSJ}}</text>
                        </p>
                        <p class="cont">
                            <text class="key">处理状态:</text><text class="value handle">{{item.JZCLJG}}</text>
                        </p>
                    </div>
                    <div class="right">
                        <text class="icon" :style="{fontFamily: 'wxcIconFont'}">{{'\ue619'}}</text>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
import event from '@/net/event'
import { addIconFontSupport } from '@/config/iconConfig.js'
const dom = weex.requireModule('dom')
export default {
    name: 'repairTask',
    data () {
        return {
            tabTitles: ['当前任务','已完成的任务'],
            num: 0,
            tabList: [],
            indexTitle: '0',
            isShow: true,
            isShows: false,
            activeIndex: null
        }
    },
    components: {

    },
    beforeCreate() {
        this.$notice.loading.show()
    },
    created(){
        event.getRepairs('1', '').then(res => {
            this.tabList = res.data.datalist
            this.$nextTick(() => {
                this.$notice.loading.hide()
            })
        })
        
        addIconFontSupport(dom, "../../");
    },
    mounted() {
        
    },
    methods: {
        tab(index) {
            this.indexTitle = index;
            this.num = index;
            this.$notice.loading.show()
            if(index == 0) {
                event.getRepairs('1', '').then(res => {
                    this.tabList = res.data.datalist
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            } else if(index == 1) {
                event.getRepairs('2', '').then(res => {
                    this.tabList = res.data.datalist
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            }
        },
        goDetail(WXID) {
            // this.activeIndex = index
            this.$router.open({
                name: 'repairDetail',
                params: {
                    WXID: WXID
                }
            })
        }
    }
}
</script>
<style scoped>
.repairTask{
    width: 750px;
}
.tab{
    width: 750px;
    height: 75px;
    background-color: #fff;
    flex-direction: row;
}
.tabTitle{
    width: 375px;
    height: 75px;
    justify-content: center;
    align-items: center;
}
.text{
    font-family:PingFangSC-Regular;
    color:rgba(151,151,151,1);
}
.active{
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
    font-size: 29.1px;
}
.list{
    width: 750px;
    padding-left: 20px;
    padding-right: 20px;
}
.panel{
    width: 710px;
    background-color: #fff;
    padding: 20px;
    margin-top: 15px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.left{
    width: 600px;
}
.right{
    width: 70px;
    justify-content: center;
    align-items: center;
}
.icon{
    color: rgba(62,175,252,1);
    font-size: 50px;
}
.cont{
    width: 710px;
    flex-direction: row;
    padding-top: 10px;
    padding-left: 30px;
}
.line{
    display: block;
    width: 8px;
    height: 28px;
    background-color: rgba(62,175,252,1);
    margin-left: -25px;
    margin-right: 15px;
}
.key{
    padding-right: 15px;
    color:rgba(102,102,102,1);
    font-family:PingFangSC-Regular;
    font-size: 25px;
}
.value{
    font-family:PingFangSC-Regular;
    color:rgba(151,151,151,1);
    font-size: 25px;
}
.handle{
    width: 120px;
    height: 40px;
    border-color: rgba(62,175,252,1);
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: rgba(62,175,252,1);
    font-family:PingFangSC-Regular;
}
/* .actives{
  background-color: rgba(62,175,252,0.2);
} */
</style>
